<style lang="scss" scoped>
	@import '@/assets/css/variable';

	.detail {
		width: 100%;
		background-color: $bgw;
		min-height: 100%;
		font-size: 1.2rem;
		overflow: hidden;
		flex:1;
		box-sizing: border-box;
		.backIcon{
			position: fixed;
			top: 5px;
			left: 10px;
			z-index: 1;
			display: flex;
			align-items: center;
			color:white;
			padding: 4px 8px;
			padding-right: 12px;
			border-radius: 6px;
			background-color: rgba($color: #000000, $alpha: 0.7);
		}
		.headerImg{
			box-sizing: border-box;
			width: 100%;
			height: 160px;
			overflow: hidden;
		}
		.video{
			width: 100%;
			height: 20rem;
			box-sizing: border-box;
		}
		.addree_link {
			width: 100%;
			height: 20rem;
			box-sizing: border-box;
		}
		.info{
			display: flex;
			flex-direction: column;
			padding: 0 1.6rem 1rem 1.6rem;
			.line1{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 1rem 0;
				.title{
					font-size: 1.7rem;
					color: $color1;
				}
				.badge {
					padding: 0.4rem 1rem;
					font-size: 1.2rem;
					background-color: rgba(#FF7E16, 0.2);
					color: #FF7E16;
					// border: 0.1rem solid #FF6D00;
					border-radius: 0.3rem;
					box-sizing: border-box;
					overflow: hidden;
				}
			}
			.line2{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				color: $color2;
				.text{
					font-size: 1.3rem;
					margin-left: 0.6rem;
				}
				.text2{
					font-size: 1.3rem;
					margin-left: 0.6rem;
					color: $adornColor;
				}
			}
		}
	}
	.content{
		padding: 1.4rem 1.6rem;
		
		.title2{
			font-size: 1.6rem;
			color: $color2;
			font-weight: bold;
		}
		.line{
			margin-top: 1.2rem;
			font-size: 1.3rem;
			.label{
				color: #999;
			}
			.value{
				color: #777;
				margin-left: 1.2rem;
				line-height: 1.6rem;
			}
		}
		.line3{
			margin-top: 1.2rem;
			font-size: 1.3rem;
			border-bottom: 1px solid #f4f4f4;
			padding-bottom: 1rem;
			.label{
				color: #999;
			}
			.title{
				font-size: 1.6rem;
				font-weight: bold;
				color: $color2;
			}
			.value{
				color: #777;
				margin-top: 1.2rem;
				letter-spacing: 1px;
			}
		}
		.line4{
			margin-top: 1.2rem;
			font-size: 1.3rem;
			padding-bottom: 1rem;
			.title{
				font-size: 1.6rem;
				color: $color2;
				font-weight: bold;
			}
			.item{
				padding: 2.8rem 1.2rem 1.2rem 1.2rem;
				background-color: white;
				box-shadow:0 0 1px 1px #f4f4f4;
				border-radius: 0.8rem;
				margin-top: 3rem;
				position: relative;
				.image{
					position: absolute;
					left: 1.2rem;
					top: -1.7rem;
				}
				.name{
					font-size: 1.5rem;
					color: $color1;
				}
				.desc{
					margin-top: 0.8rem;
					color: $color3;
					font-size: 1.1rem;
					line-height: 1.6rem;
					letter-spacing: 1px;
				}
			}
		}
	}
	.fix-bottom{
	  position: fixed;
	  bottom: 0rem;
	  left: 0;
	  right: 0;
	  z-index: 1;
	  box-sizing: border-box;
	  background: white;
	  text-align: center;
	  border-top: 1px solid #f4f4f4;
	  padding: 0.5rem 1.6rem;
	  display: flex;
	  align-items: center;
	  justify-content: space-around;
	  .box{
		  flex: 0 0 3.6rem;
		  .icon{
			  .img{
				width: 31px !important;
			  }
		  }
		  .text{
			  font-size: 1.3rem;
			  color: $color3;
		  }
	  }
	  .submitBtn{
		  flex: 1;
		  background-color:$mainColor;
		  color:white;
		  margin: 0.2rem auto;
		  font-size: 1.4rem;
		  
	  }
	}
	.jie{
		padding: 1rem 0;
		color:$color1 !important;
	}
</style>
<template>
	<div class="detail" v-if="course.course">
		<div class="backIcon" @click="back"><van-icon name="arrow-left" color="#fff"/><span class="margL-s">返回首页</span></div>
		<video v-if="link && !outLink" class="video" :src="link" controls="controls" autoplay="autoplay">
			your browser does not support the video tag
		</video>
		<div id="" v-if="outLink">
			<div v-html="link" style="width:100%"></div>
		</div>
		<div class="headerImg" v-if="!link && !outLink">
			<van-image width="100%" height="100%" fit="cover" :src="course.course.images" />
		</div>
		<div class="info">
			<div class="line1">
				<span class="title">{{course.course.name}}</span>
			</div>
			<div class="line2">
				<span><van-icon name="clock-o" size="1.8rem"/></span>
				<span class="text">共{{course.course.course_duration}}节课时</span>
			</div>
			<div class="line2 margT-l">
				<span><van-icon name="friends-o" size="1.9rem"/></span>
				<span class="text">{{course.course.sign}}人在学</span>
			</div>
		</div>
		<div class="splitLine"></div>
		<div class="detail_tabs">
			<van-tabs v-model="tabActive" line-width="100" title-active-color="#335FFC" color="#335FFC" @change="onClickTabs">
			  <van-tab title="课程简介" name="0">
				  <div class="content ql-editor">
					  <div class="line3">
						  <div class="title">课程信息</div>
						  <div class="value">
							  {{course.course.introduction}}
						  </div>
					  </div>
					<div class="line3" v-if="course.course.introduction">
						<div class="title">课程详情</div>
						<div class="value" v-html="course.course.content"></div>
					</div>
					  <div class="line4">
						  <div class="title">课程讲师</div>
						  <div class="item" v-for="(item,index) in course.teacher" :key="index">
							  <van-image
								class="image"
								round
							    width="3.4rem"
							    height="3.4rem"
							    fit="cover"
							    :src="item.avatar"
							  />
							  <div class="name">{{item.name}}</div>
							  <div class="desc">{{item.introduction}}</div>
						  </div>
					  </div>
				  </div>
			  </van-tab>
			  <van-tab title="课程目录" name="1">
				  <van-collapse v-model="activeNames">
				    <van-collapse-item v-for="(item,index) in coursesMulu" :key="index" :title="`第${index+1}章 ${item.title}`" :name="index">
						<div class="jie" :class="active==item.id?'active':''" v-for="(item,index) in item.children" :key="index" @click="changeLink(item)">{{index+1}} {{item.titles}}</div>
					</van-collapse-item>
				  </van-collapse>
			  </van-tab>
			</van-tabs>
		</div>
		<div class="tabbar-height-white"></div>
		<div class="fix-bottom">
			<div class="box" @click="CollectH5Saves(course.course.id)">
				<span class="icon">
					<img class="img" v-if="collect==false" src="../../assets/img/star_unactive.svg" alt="">
					<img class="img" v-else src="../../assets/img/star_active.svg" alt="">
				</span>
				<span class="text">
					收藏
				</span>
			</div>
			<div class="box margL-l margR-l" @click="shareEvent">
				<span class="icon">
					<img style="width: 39px;" src="../../assets/img/wechat.svg" alt="">
				</span>
				<span class="text">
					分享
				</span>
			</div>
			<van-button round class="submitBtn" v-if="!isLearningAlready" @click="LearningSave">加入学习库</van-button>
			<van-button round class="submitBtn" v-else disabled>已加入学习库</van-button>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import {Dialog,Toast} from 'vant';
	import SearchBox from '@/components/SearchBox.vue'
	import {
		myMixins
	} from "@/assets/js/mixins.js"
	export default {
		name: "course",
		mixins: [myMixins],
		components: {
			SearchBox
		},
		data() {
			return {
				// 外部地址
				outLink: false,
				tabActive:0,
				activeNames: [],
				course:'',
				coursesMulu:'',
				link:'',
				userInfo:'',
				collect:'',
				isLearningAlready:'',
				startTime:'',
				endTime:''
			}
		},
		created() {
			const _this = this;
			this.openid = localStorage.getItem("openid") || this.$store.state.openid;
			console.log("this.openid",this.openid)
			if (this.openid) {
			  const url = (location.href)
			  if(url.indexOf('code')>0){
			  	this.$router.push(`${url.split('#')[1]}`)
			  }else{
				  const campus = JSON.parse(localStorage.getItem("selectedCampus"));
				  if (!campus) {
					const fromView = location.href.split('#')[1];
					localStorage.setItem('from',fromView)
					this.$router.push(`/selectCampus?from=${fromView}`);
				  }
			  }
			}else{
			  if(process.env.NODE_ENV == 'production'){
			    console.log("getWeixinConfig")
			    _this.getWeixinConfig()
			  }
			}
		},
		mounted() {
			const id = this.$route.query.id
			const type = this.$route.query.type
			this.CoursesDetail(id,type)
			this.CollectH5Items()
			this.LearningAlready()
			// var video = document.getElementById(videoName);
			// video.addEventListener("timeupdate",function(){
			// 	console.log("timeupdate")
			// })
			//开始计时
			this.startTime = new Date().getTime()
		},
		beforeDestroy() {
			const endTime = new Date().getTime()
			let duration = (endTime - this.startTime)/1000/60
			console.log("duration",duration)
			if(duration>=1){
				//停留在页面的时间超过1分钟，就累计学习时长
				//这里调用累计学习时长的接口
				
			}
		},
		methods: {
			changeLink(item){
				if(!item.links){
					this.link = item.link_address
				}else{
					this.link = item.links
				}
				if(this.link.indexOf('iframe') != -1) {
					console.log('我是外部链接地址')
					this.link.replace("https","http");
					console.log(this.link)
					this.outLink = true
				} else {
					this.outLink = false
				}
				console.log("link",this.link)
			},
			LearningSave() {
				const _this = this;
				let params = {
					type: 1,
					course_id: this.$route.query.id,
					openid:this.$store.state.openid || localStorage.getItem('openid'),
					campus_id:JSON.parse(localStorage.getItem('selectedCampus')).id
				}
				_this.$request.LearningSave(params).then(res => {
					if(res.ret==200){
						//this.collect = res.data
						_this.$toast("添加成功")
						this.LearningAlready()
					}
				})
			},
			LearningAlready() {
				const _this = this;
				let params = {
					course_id: this.$route.query.id,
					openid:this.$store.state.openid || localStorage.getItem('openid'),
					campus_id:JSON.parse(localStorage.getItem('selectedCampus')).id
				}
				_this.$request.LearningAlready(params).then(res => {
					if(res.ret==200){
						this.isLearningAlready = res.data
					}
				})
			},
			CollectH5Items() {
				const _this = this;
				let params = {
					course_id: this.$route.query.id,
					openid:this.$store.state.openid || localStorage.getItem('openid'),
					campus_id:JSON.parse(localStorage.getItem('selectedCampus')).id
				}
				_this.$request.CollectH5Items(params).then(res => {
					if(res.ret==200){
						this.collect = res.data
					}
				})
			},
			CollectH5Saves() {
				const _this = this;
				let params = {
					course_id: this.$route.query.id,
					openid:this.$store.state.openid || localStorage.getItem('openid'),
					campus_id:JSON.parse(localStorage.getItem('selectedCampus')).id
				}
				console.log("CollectH5Saves",params)
				_this.$request.CollectH5Saves(params).then(res => {
					if(res.ret==200){
						Toast('操作成功')
						_this.CollectH5Items()
					}
				})
			},
			CoursesDetail(id,type) {
				const _this = this;
				let params = {
					id:id,
					type:type,
					campus: JSON.parse(localStorage.getItem('selectedCampus')).id,
					campus_id: JSON.parse(localStorage.getItem('selectedCampus')).id
				}
				_this.$request.CoursesDetail(params).then(res => {
					if(res.ret==200){
						this.course = res.data
						this.link = res.data.link
						this.link_address = res.data.link_address
						this.shareThisPage(this.course.course);
					}
					// this.$store.commit('setCaseList', this.caseList);
				})
			},
			addInStudyku() {
				this.$toast("添加成功")
			},
			onClickTabs(index) {
				console.log("onClickTabs", index)
				this.active = index
				if (index == 0) {
					//全部
					
				} else if (index == 1) {
					//线下课程
					this.CoursesItem()
				}
			},
			CoursesItem() {
				const _this = this;
				let params = {
					id: this.course.course.id
				}
				console.log("CoursesItem",params)
				_this.$request.CoursesItem(params).then(res => {
					_this.coursesMulu = res.data
				})
			},
		}
	};
</script>
